<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite">
 
	<composite:interface>
		<composite:attribute name="options" />
		<composite:attribute name="addAction" method-signature="java.lang.String action()" required="true" />
		<composite:attribute name="removeAction" method-signature="java.lang.String action()" required="true" />
	</composite:interface>
	 
	<composite:implementation>
		<h:outputStylesheet library="components/question/css" name="layout.css" target="head" />
		
		<fieldset class="options">		
			<legend>Which are the options?</legend>
		
			<h:panelGrid columns="2" rowClasses="valign-top">	
				
				<h:dataTable id="questionChoices"
							 value="#{checkboxQuestionCreationView.newQuestion.options}"
							 var="option">

					<h:column>
						<h:graphicImage library="images" name="unchecked.png" />
					</h:column>
					<h:column>					
						<h:inputText value="#{option.text}" size="55" class="options-textField">
							<f:ajax event="keyup" process="@this" />
						</h:inputText>
					</h:column>
				</h:dataTable>
				
				<h:column style="text-align: right;">			
					<h:commandButton actionListener="#{cc.attrs.addAction}"
									 value="+"
									 styleClass="options-btn-control">
						<f:ajax event="action" process="@this" immediate="true" render="questionChoices" />
					</h:commandButton>
					<h:commandButton actionListener="#{cc.attrs.removeAction}"
									 value="-"
	                				 styleClass="options-btn-control">
	                	<f:ajax event="action" process="@this" immediate="true" render="questionChoices" />
					</h:commandButton>
				</h:column>
			</h:panelGrid>

		</fieldset>
	</composite:implementation>
</html>
